<template>
  <div>
    <el-card>
      <span>全部显示</span>
      <hyl-list v-for="(item,index) in fonts" :list="item" :gutter="10" :span="4" :key="index"></hyl-list>
    </el-card>
    <el-card>
      <span>list</span>
      <div class="list-group">
        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
      </div>
    </el-card>
    <el-card>
      <span>模糊查找</span>
      <el-input v-model="name"/> 查找
      <hyl-list v-for="(item,index) in fontsFilter" :list="item" :gutter="10" :span="4" :key="index"></hyl-list>
    </el-card>
  </div>
</template>

<script>
import hylList from '@/components/list'
export default {
  name: 'font-awesome',
  data () {
    return {
      fonts: [],
      fontAwesome: [],
      name: ''
    }
  },
  computed: {
    fontsFilter () {
      let temp = []
      let tempAwesome = []
      let tempAwesomeF = []
      if (this.name === '') {
        return tempAwesomeF
      }
      temp = this.fontAwesome.filter((item) => {
        if (item.search(this.name) >= 0) {
          return true
        }
        return false
      })
      temp.forEach((item, index) => {
        tempAwesome.push(item)
        if (index > 0 && (index + 1) % 4 === 0) {
          tempAwesomeF.push(tempAwesome)
          tempAwesome = []
        }
      })
      if (temp.length < 4) {
        tempAwesomeF.push(temp)
      }
      return tempAwesomeF
    }
  },
  components: {
    hylList
  },
  mounted: function () {
    let fontAwesome = ['glass',
      'music',
      'search',
      'envelope',
      'heart',
      'star',
      'star-empty',
      'user',
      'film',
      'th-large',
      'th',
      'th-list',
      'ok',
      'remove',
      'zoom-in',
      'zoom-out',
      'off',
      'signal',
      'cog',
      'trash',
      'home',
      'file',
      'time',
      'road',
      'download-alt',
      'download',
      'upload',
      'inbox',
      'play-circle',
      'repeat',
      'refresh',
      'list-alt',
      'lock',
      'flag',
      'headphones',
      'volume-off',
      'volume-down',
      'volume-up',
      'qrcode',
      'barcode',
      'tag',
      'tags',
      'book',
      'bookmark',
      'print',
      'camera',
      'font',
      'bold',
      'italic',
      'text-height',
      'text-width',
      'align-left',
      'align-center',
      'align-right',
      'align-justify',
      'list',
      'indent-left',
      'indent-right',
      'facetime-video',
      'picture',
      'pencil',
      'map-marker',
      'adjust',
      'tint',
      'edit',
      'share',
      'check',
      'move',
      'step-backward',
      'fast-backward',
      'backward',
      'play',
      'pause',
      'stop',
      'forward',
      'fast-forward',
      'step-forward',
      'eject',
      'chevron-left',
      'chevron-right',
      'plus-sign',
      'minus-sign',
      'remove-sign',
      'ok-sign',
      'question-sign',
      'info-sign',
      'screenshot',
      'remove-circle',
      'ok-circle',
      'ban-circle',
      'arrow-left',
      'arrow-right',
      'arrow-up',
      'arrow-down',
      'share-alt',
      'resize-full',
      'resize-small',
      'plus',
      'minus',
      'asterisk',
      'exclamation-sign',
      'gift',
      'leaf',
      'fire',
      'eye-open',
      'eye-close',
      'warning-sign',
      'plane',
      'calendar',
      'random',
      'comment',
      'magnet',
      'chevron-up',
      'chevron-down',
      'retweet',
      'shopping-cart',
      'folder-close',
      'folder-open',
      'resize-vertical',
      'resize-horizontal',
      'bar-chart',
      'twitter-sign',
      'facebook-sign',
      'camera-retro',
      'key',
      'cogs',
      'comments',
      'thumbs-up',
      'thumbs-down',
      'star-half',
      'heart-empty',
      'signout',
      'linkedin-sign',
      'pushpin',
      'external-link',
      'signin',
      'trophy',
      'github-sign',
      'upload-alt',
      'lemon',
      'phone',
      'check-empty',
      'bookmark-empty',
      'phone-sign',
      'twitter',
      'facebook',
      'github',
      'unlock',
      'credit-card',
      'rss',
      'hdd',
      'bullhorn',
      'bell',
      'certificate',
      'hand-right',
      'hand-left',
      'hand-up',
      'hand-down',
      'circle-arrow-left',
      'circle-arrow-right',
      'circle-arrow-up',
      'circle-arrow-down',
      'globe',
      'wrench',
      'tasks',
      'filter',
      'briefcase',
      'fullscreen',
      'group',
      'link',
      'cloud',
      'beaker',
      'cut',
      'copy',
      'paper-clip',
      'save',
      'sign-blank',
      'reorder',
      'list-ul',
      'list-ol',
      'strikethrough',
      'underline',
      'table',
      'magic',
      'truck',
      'pinterest',
      'pinterest-sign',
      'google-plus-sign',
      'google-plus',
      'money',
      'caret-down',
      'caret-up',
      'caret-left',
      'caret-right',
      'columns',
      'sort',
      'sort-down',
      'sort-up',
      'envelope-alt',
      'linkedin',
      'undo',
      'legal',
      'dashboard',
      'comment-alt',
      'comments-alt',
      'bolt',
      'sitemap',
      'umbrella',
      'paste',
      'lightbulb',
      'exchange',
      'cloud-download',
      'cloud-upload',
      'user-md',
      'stethoscope',
      'suitcase',
      'bell-alt',
      'coffee',
      'food',
      'file-alt',
      'building',
      'hospital',
      'ambulance',
      'medkit',
      'fighter-jet',
      'beer',
      'h-sign',
      'plus-sign-alt',
      'double-angle-left',
      'double-angle-right',
      'double-angle-up',
      'double-angle-down',
      'angle-left',
      'angle-right',
      'angle-up',
      'angle-down',
      'desktop',
      'laptop',
      'tablet',
      'mobile-phone',
      'circle-blank',
      'quote-left',
      'quote-right',
      'spinner',
      'circle',
      'reply' ]
    this.fontAwesome = fontAwesome
    let temp = []
    fontAwesome.forEach((item, index) => {
      temp.push(item)
      if (index > 0 && (index + 1) % 4 === 0) {
        this.fonts.push(temp)
        temp = []
      }
    })
  }
}
</script>

<style scoped>

</style>
